<script setup lang="ts">
import type { ISearchRecomment } from '@/types'
interface IProps {
    recomments:ISearchRecomment[]
}
defineProps<IProps>()
</script>
<template>
    <div class="home-top">
        <div class="top"></div>
        <VanSearch shape="round" background="linear-gradient(to right,rgb(53,200,250),rgb(31,175,243))"
        placeholder="世界茶饮 减35"
        >
            <template #right-icon>
                <div>搜索</div>
            </template>
        </VanSearch>
        <div class="search-recommend">
            <div class="tag" v-for="v in recomments" :key="v.value">{{v.label}}</div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.home-top{
    background: linear-gradient(to right,rgb(53,200,250),rgb(31,175,243));
    color: white;
    .top{
        display: flex;
        align-items: center;
        padding: 10px 10prx 0 10px;
        line-height: 15rpx;
        font-size: 15px;
        font-weight: bold;
    }
    .search-recommend{
        display: flex;
        padding: 0 10px 8px;
        .tag{
            font-size: 12px;
            background: rgb(242,242,242,0.3);
            padding: 2px 8px ;
            margin-right: 10px;
            border-radius: 5px;
        }
    }
    .location-icon,.shopcart-icon{
        width: 24rpx;
        height: 24rpx;
    }
}
</style>
<!-- 为了重写搜索的样式 -->
<style lang="scss">
.home-top{
    .van-field__right-icon{
        margin-right: 0;
    }
}
</style>